<template>
    <view class="container">
        <view class="typelist">
            <view @tap="chooseOrther" data-type="1" :class="tags_id == 0 && is_has_image == 1 ? 'active' : ''">全部</view>
            <view @tap="chooseOrther" data-type="2" :class="tags_id == 0 && is_has_image == 2 ? 'active' : ''">有图</view>
            <view @tap="chooseTags" :data-id="item.id" :class="tags_id == item.id ? 'active' : ''" v-for="(item, index) in tagsData"  >{{ item.name }}</view>
        </view>

        <view class="anslist">
            <block v-if="loadingList.total > 0">
                <block v-for="(item, index) in loadingList.data"  >
                    <navigator
                        :url="'/pages/article/ask_detail/ask_detail?id=' + item.id + '&house_id=' + house_id + '&house_name=' + house_name"
                         
                        class="ansitem"
                    >
                        <view class="title">{{ item.question }}</view>
                        <block v-if="item.state == 2">
                            <view class="flex-box" style="padding-bottom: 20rpx">
                                <image :lazy-load="true" :src="item.broker.avatar" class="avatar"></image>
                                <view class="name">{{ item.broker.nickname }}</view>
                                <view class="called">{{ item.broker.tags }}</view>
                            </view>
                            <view class="multi-line">
                                {{ item.answer }}
                            </view>
                        </block>
                        <block v-else>
                            <view class="flex-box">未解决</view>
                        </block>
                        <view class="flex-box flex-between pt20">
                            <view class="flex-box">
                                <view :class="index % 2 == 0 ? 'type1' : 'type2'">精选问答</view>
                                <view class="classify" v-for="(item, index1) in item.q_and_a_tags_ids_text_arr"  >{{ item }}</view>
                            </view>
                            <view>
                                <text class="fs22 col89">{{ item.view_num }}</text>
                                <text class="fs22 colc">浏览</text>
                                <text class="fs22 colc">|</text>
                                <text class="fs22 col89">{{ item.like_num }}</text>
                                <text class="fs22 colc">赞</text>
                            </view>
                        </view>
                    </navigator>
                </block>
                <u-loadmore  v-if="loadingList.total > 9"  :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"  nomore-text="没有更多了" />
            </block>
            <block v-else>
                <u-empty
                        mode="data"
                		text="暂无数据"
                		textSize="24"
                        icon="/static/images/none-data.png"
                >
                </u-empty>
            </block>
        </view>
    </view>
</template>

<script>
const app = getApp();

const functions = require('../../../utils/functions.js');

export default {
    data() {
        return {
			loadStatus:'loadmore',//加载状态
            house_name: '',
            house_id: 0,
            broker_user_id: 0,
            keyword: '',
            is_has_image: 1,
            //是否有图：1=全部，2=有
            tags_id: 0,
            tagsData: [],
            // 列表
            loadingList: {
                total: 0,
                current_page: 0,
                last_page: 1,
                data: []
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.house_name=options.house_name || '';
        this.house_id=options.house_id || 0;
        this.broker_user_id=options.broker_user_id || 0
        this.initData();
    },
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading(); //在标题栏中显示加载

        var that = this; //模拟加载

        setTimeout(function () {
            that.initData();
            uni.stopPullDownRefresh(); //停止下拉刷新
        }, 1500);
    },
    onReachBottom: function () {
        if (this.loadingList.current_page >= this.loadingList.last_page) {
            this.loadStatus='nomore';
            return false;
        } else {
            this.getloadingList();
        }
    },
	methods: {
        chooseOrther(e) {
            this.is_has_image=e.currentTarget.dataset.type;
            this.tags_id=0;
            this.loadingList.current_page=0
            this.getloadingList();
        },

        chooseTags(e) {
			this.is_has_image=1;
			this.tags_id=e.currentTarget.dataset.id,
			this.loadingList.current_page=0
            this.getloadingList();
        },

        // 获取列表信息
        getloadingList: function () {
            var that = this;
            var json = {
                house_id: that.house_id,
                keyword: that.keyword,
                broker_user_id: that.broker_user_id,
                is_has_image: that.is_has_image,
                tags_id: that.tags_id
            };
            json.page = Number(that.loadingList.current_page) + 1;

            if (json.page > 1 && that.loadingList.current_page >= that.loadingList.last_page) {
                functions.toast('已加载到底部了');
				this.loadStatus='nomore';
                return false;
            } 
			this.loadStatus='loading';
            functions.getAjaxList(that, '/api/xiluhouse/Question/questions_list', json, function (res) {
                var loadingList = res.data;

                if (json.page > 1) {
                    var now_loadingList_data = that.loadingList.data || [];
                    var now_loadingList_data = now_loadingList_data.concat(loadingList.data);
                    loadingList.data = now_loadingList_data;
                }
				if(loadingList.current_page >= loadingList.last_page){
					that.loadStatus='nomore';
				}

                that.loadingList=loadingList
            });
        },

        initData() {
            var that = this; // 获取---搜索数据

            functions.getAjaxData('/api/xiluhouse/Question/question_tags_data', {}, function (res) {
                that.tagsData=res.data
            });
            that.loadingList.current_page= 0
            that.getloadingList();
        }
    }
};
</script>
<style>
@import url('@/static/css/old_project.css');
.typelist {
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
    padding: 30rpx 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.typelist view {
    padding: 10rpx 25rpx;
    border-radius: 5px;
    background: #f6f7fa;
    color: #898989;
    display: inline-block;
    margin-right: 20rpx;
}
.typelist view.active {
    background-color: #0091ff;
    color: #fff;
}
.typelist view:first-child {
    margin-left: 40rpx;
}
.anslist {
    padding: 120rpx 40rpx 0;
}

.ansitem {
    padding: 30rpx 0;
    border-bottom: 1px solid #f4f3f3;
}

.ansitem .title {
    font-size: 32rpx;
    font-weight: bold;
    padding-bottom: 30rpx;
}
.ansitem .avatar {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    margin-right: 10rpx;
}
.ansitem .name {
    font-size: 24rpx;
    color: #898989;
    padding-right: 30rpx;
}
.ansitem .called {
    font-size: 24rpx;
    color: #ccc;
}
.ansitem .multiline {
    margin: 20rpx 0 22rpx;
    font-size: 30rpx;
}
.ansitem .type1 {
    width: 82rpx;
    height: 30rpx;
    background: linear-gradient(270deg, #ffb45c 0%, #ff6635 100%);
    border-radius: 4rpx;
    font-size: 18rpx;
    color: #fff;
    margin-right: 20rpx;
    text-align: center;
    line-height: 30rpx;
}
.ansitem .type2 {
    width: 82rpx;
    height: 30rpx;
    background: linear-gradient(180deg, #00c4ff 0%, #0091ff 100%);
    border-radius: 4rpx;
    font-size: 18rpx;
    color: #fff;
    margin-right: 20rpx;
    text-align: center;
    line-height: 30rpx;
}
.ansitem .classify {
    font-size: 20rpx;
    color: #898989;
}
</style>
